<template>
  <div class="heado">
    <!-- 调用组件 搜索框 轮播图 -->
    <app-search></app-search>
    <!--  -->
    <div class="module_head">
      <div class="mh_menu">
        <ul class="clearfloat" style="width: 278px;">
          <li data-url="/index.php?s=/index/index" class="current">
            <span>今日精选</span>
          </li>
          <li
            data-url="https://restapi.happigo.com/pages/newAndHot/hotIndex.html?newandhot_id=2&amp;source=KLGMPortal"
          >
            <span>热销</span>
          </li>
          <li
            data-url="https://restapi.happigo.com/pages/newAndHot/newIndex.html?newandhot_id=1&amp;source=KLGMPortal"
          >
            <span>新品首发</span>
          </li>
        </ul>
      </div>
    </div>
    <!--  -->
    <app-swipe></app-swipe>
    <!-- <app-grid></app-grid>
    <app-sw></app-sw>
    <app-recommended></app-recommended>
    <app-clear></app-clear>-->
    <div class="clearfloat">
      <a href="https://game.happigo.com/App/mgnhj200110?source=KLGMPortal">
        <img
          class="lazy img-col1"
          data-original="https://ecimg.happigo.com/data/upload/app/adsession/2020/204_11/06322212331560223.gif"
          src="https://ecimg.happigo.com/data/upload/app/adsession/2020/204_11/06322212331560223.gif"
        />
      </a>
    </div>
    <div class="clearfloat2">
      <a
        href="https://restapi.happigo.com/pages/zt/ztDetail.html?id=9557&amp;for=app?source=KLGMPortal"
      >
        <img
          class="lazy img-col2"
          data-original="https://ecimg.happigo.com/data/upload/app/adsession/2020/188_12/06319691750132759.jpg"
          src="https://ecimg.happigo.com/data/upload/app/adsession/2020/188_12/06319691750132759.jpg"
        />
      </a>
      <a
        href="https://restapi.happigo.com/pages/zt/ztDetail.html?id=9556&amp;for=app?source=KLGMPortal"
      >
        <img
          class="lazy img-col2"
          data-original="https://ecimg.happigo.com/data/upload/app/adsession/2020/127_12/06319691809729773.jpg"
          src="https://ecimg.happigo.com/data/upload/app/adsession/2020/127_12/06319691809729773.jpg"
        />
      </a>
    </div>
    <!-- <div class="title1">
      <b>- 今日活动・每日9点上新 -</b>
    </div>
    
    <div class="today-act" v-for="item in 4" :key="item">
      <a
        class="act-img"
        href="https://restapi.happigo.com/pages/zt/ztDetail.html?id=9535&amp;for=wx"
      >
        <img
          class="lazy"
          data-original="https://ecimg.happigo.com/data/upload/app/adsession/2020/4/06319093401148193.jpg"
          src="https://ecimg.happigo.com/data/upload/app/adsession/2020/4/06319093401148193.jpg"
        />
        <div class="sanjiao"></div>
      </a>
      <div class="swiper-container"></div>
    </div> -->
    
    <!--  -->
    <div class="title1">
      <b>- 优选好物 -</b>
    </div>
    <!--  -->
    <div class="listbott">
      <div class="listbo" v-for="item in listbo" :key="item.id" @click="details(item)">
        <div class="g-img">
          <img
            :src="item.img"
          />
        </div>
        <div class="g-title">
          <p class="g-name">{{item.title}}</p>
          <p class="g-price">
            {{item.price}}
            <i>{{item.delprice}}</i>
          </p>
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>
import appSearch from "../components/appsearch";
import appSwipe from "../components/appswipe";

export default {
  data(){
    return{
      listbo:""
    }
  },
  methods:{
    async getlistbo(){ //首页最底部“优选好物”
      let {data} = await this.$axios.get("http://localhost:5555/listbo/all");
      this.listbo = data;
    },
    details(item) {
      //点击商品进入详情页
      let { id, cname, img, name, dis, price, delprice } = item;
      // window.console.log({ id, cname, img, name, dis, price, delprice });
      this.$router.push({ name: "details", query: { id, cname, img, name, dis, price, delprice }
      });
    }
  },
  components: {
    appSearch,
    appSwipe
  },
  created(){
    this.getlistbo()
  }
};

// 下面css样式中添加scopde表示只在当前页生效，但目前来看并没有用
</script>
<style scopde>
.heado {
  background: white;
}
.module_head {
  width: 100%;
  overflow: hidden;
}
.mh_menu {
  width: 100%;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: auto;
}
.mh_menu ul {
  width: 2.78rem;
}
.mh_menu ul li {
  margin: 0 12px;
  float: left;
  font-size: 15px;
  line-height: 40px;
  color: #323232;
}
.van-swipe__indicator {
  border: 1px solid black;
}
.clearfloat {
  margin-top: -9px;
  padding: 0 0.2rem;
}
.clearfloat a {
  width: 7.5rem;
}
.clearfloat img {
  width: 100%;
}
.clearfloat2 {
  margin-top: -9px;
  padding: 0.2rem;
}
.clearfloat2 a {
  width: 7.5rem;
}
.clearfloat2 img {
  width: 50%;
}
.title1 {
  font-size: 17px;
  height: 0.8rem;
}
.today-act {
  margin: 0 0 0.25rem 0;
}
.today-act a {
  width: 7.5rem;
  position: relative;
}
.today-act a img {
  width: 100%;
}
.sanjiao {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 2;
  margin-left: -4px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.swiper-container {
  background: #323232;
  height: 5.3rem;
}
.listbo {
  width: 48%;
  float: left;
}
.g-img {
  width: 100%;
}
.g-img img {
  width: 100%;
}
.g-name {
  font-size: 16px;
  height: 2.8em;
  line-height: 1.4em;
  overflow: hidden;
  color: #5a5a5a;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.g-price {
  font-size: 16px;
  display: block;
  color: #c4193f;
  overflow: hidden;
  margin-bottom: 5px;
  text-align: center;
}
.g-price i {
  font-style: normal;
  color: #959595;
  text-decoration: line-through;
  line-height: 2em;
  font-size: 0.93em;
  margin-left: 3px;
}
.listbott{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around
}
</style>
